import React from "react";
import styles from "./Product.module.css";
import {Col, Divider, Row} from "antd";
import {ProductImage} from "./ProductImage";

interface PropsType {
    title: React.JSX.Element;
    products: any[];
}

/**
 * 描述：首页商品
 * 作者：刘飞华
 * 日期：2024/3/29 17:18
 */
export const Product: React.FC<PropsType> = ({title, products}) => {

    return (
        <div className={styles.content}>
            <Divider orientation="left">{title}</Divider>
            <Row gutter={[16, 16]}>
                {products != null && products.map((item, index) => (
                    <Col span={4} key={"Product-" + index}>
                        <ProductImage
                            id={item.id}
                            title={item.name}
                            imageSrc={item.pic}
                            price={item.price}
                        />

                    </Col>
                ))}
            </Row>

        </div>
    );
}
